<template>
  <transition
    name="dialog-fade">
    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick" @mousewheel.prevent.stop="()=>{}"  @touchmove.prevent.stop="()=>{}">
      <div
        class="el-dialog"
        :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
        ref="dialog"
        :style="style">
        <div class="el-dialog__header" v-if="$slots.title">
          <slot name="title">
            <span class="el-dialog__title">{{ title }}</span>
          </slot>
        </div>
        <!-- 内容模块 -->
        <div class="el-dialog__body" v-if="rendered">
            <slot></slot>
        <!-- 内容模块 -->
        </div>
        <!-- 友好提示 -->
        <div class="popupTips" v-if="$slots.desc">
            <slot name= "desc"></slot>
        </div>
        <!-- 页脚按钮 -->
        <div class="el-dialog__footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
        <!-- 关闭按钮 -->
        <button
        type="button"
        class="el-dialog__closebtn"
        aria-label="Close"
        v-if="showClose"
        @click="handleClose">
        <i class="el-dialog__close el-icon el-icon-close"></i>
        <!-- 52555 -->
        </button>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
    name: 'SignDialog',
    props: {
        visible: Boolean,
        closeOnClickModal: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: ''
        },
        appendToBody: {
            type: Boolean,
            default: true
        },
        lockScroll: {
            type: Boolean,
            default: true
        },
        showClose: {
            type: Boolean,
            default: true
        },
        width: String,
        fullscreen: Boolean,
        customClass: {
            type: String,
            default: ''
        },
        top: {
            type: String,
            default: '15vh'
        },
        beforeClose: Function,
        center: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            closed: false,
            rendered: -1,
            mask: ''
        }
    },
    watch: {
        visible(val) {
            if (val) {
                this.closed = false
                // this.$emit('open')
                // this.$el.addEventListener('scroll', this.updatePopper)
                this.$nextTick(() => {
                    this.$refs.dialog.scrollTop = 0
                })
                if (this.appendToBody) {
                    document.body.appendChild(this.$el)
                }
                // 添加mask
                let mask = document.createElement('div')
                mask.className = 'modal'
                document.body.appendChild(mask)
                this.mask = mask
            } else {
                if (!this.closed) this.$emit('close')
                // 删除mask
                this.mask.parentNode.removeChild(this.mask)
            }
        }
    },
    computed: {
        style() {
            let style = {}
            if (!this.fullscreen) {
                style.marginTop = this.top
                if (this.width) {
                    style.width = this.width
                }
            }
            return style
        }
    },
    methods: {
        handleWrapperClick() {
            if (!this.closeOnClickModal) return
            this.handleClose()
        },
        handleClose() {
            if (typeof this.beforeClose === 'function') {
                this.beforeClose(this.hide)
            } else {
                this.hide()
            }
        },
        hide(cancel) {
            if (cancel !== false) {
                this.$emit('update:visible', false)
                this.$emit('close')
                this.closed = true
            }
        },
        afterLeave() {
            this.$emit('closed')
        }
    },
    mounted() {
        if (this.visible) {
            this.rendered = true
            // this.open()
            if (this.appendToBody) {
                document.body.appendChild(this.$el)
            }
            let mask = document.createElement('div')
            mask.className = 'modal'
            document.body.appendChild(mask)
            this.mask = mask
            //  document.body.appendChild()
        }
    },
    destroyed() {
        if (this.appendToBody && this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el)
        }
    }
}
</script>
<style lang="scss">
    .el-dialog__wrapper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
        // background-color: rgba(0, 0, 0, .6);
        z-index: 2;
    }
    .el-dialog--center .el-dialog__footer {
        text-align: inherit;
    }
    .el-dialog__footer {
        padding: 10px 0;
        // padding-top: 10px;
        text-align: right;
        box-sizing: border-box;
    }
    .el-dialog {
        position: relative;
        margin: 0 auto 10px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        box-sizing: border-box;
        width: 80%;
        padding: 30px 20px;
        //max-width: 350px;
        .el-dialog__body {
            position: relative;
            img {
                width: 100%;
            }
        }
    }
    .el-dialog--center {
        text-align: center;
    }
    .el-dialog__closebtn {
        position: absolute;
        left: calc(50% - 15px);
        bottom: -60px;
        width: 30px;
        height: 30px;
        // background-color: red;
        display: inline-block;
        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 16px;
    }
    .el-icon-close {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-image: url("");
        background-size: 100% 100%;
    }
    .dialog-footer {
        .signBtn {
            width: 96px;
            padding: 9px 21px;
            height: 37px;
            border-radius: 5px;
            border:1px solid #ed554c;
            background-color: #fff;
            font-size: 13px;
        }
        button:first-child {
            margin-right: 10px;
        }
        button:last-child {
            margin-left: 10px;
        }
        .sureBtn {
            color:#ed554c;
        }
        .canceBtn {
            background-color:#ed554c;
            color:#ffffff;
        }
    }
    .popupTips > p, .popupTips > span, .popupTips > div {
                padding: 10 0;
                display:flex;
                flex-direction: column;
                font-size: 15px;
                line-height: 24px;
    }
    // .signBtn {
    //     padding: 9px 21px;
    //     background: #f7584f;
    //     color: #fff;
    //     border: none;
    //     font-size: 13px;
    //     border-radius: 6px;
    //     margin:  0 auto;
    // }
    .sureBtn {
        color:#ed554c;
    }
    .canceBtn {
        background-color:#ed554c;
        color:#ffffff;
    }
    .modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
        background: #000;
        z-index: 1;
    }
    .dialog-fade-enter-active{animation:dialog-fade-in .3s}
    .dialog-fade-leave-active{animation:dialog-fade-out .3s}
    @keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}
    @keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}
</style>
